/* You can add global styles to this file, and also import other style files */

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

.hero-card {
  max-width: 400px;
}

table {
  width: 100%;
}

.rounded {
  display: inline-block;
  position: relative;
  width: 80%;
  overflow: hidden;
  border-radius: 50%;
  margin-bottom: 20px;
}

.level {
  float: right;
  color: deeppink;
  font-weight: bold;
  border-radius: 50%;
}

.hero-name {
  padding: 20px;
  background: dodgerblue;
  color: white;
}

.villain-name {
  padding: 20px;
  background: firebrick;
  color: white;
}

.winner-text {
  font-weight: bold;
  font-size: large;
}

.winner-hero {
  color: dodgerblue;
}

.winner-villain {
  color: firebrick;
}

.hero-winner-card {
  box-shadow:
    inset 0 0 10px #fff,
    inset 20px 0 50px #77b4f0,
    inset -20px 0 60px #5fc3d7,
    inset 20px 0 100px #4a54ff,
    inset -20px 0 100px #0ff,
    0 0 50px #fff,
    -10px 0 50px #4a54ff,
    10px 0 50px #0ff;
}

.villain-winner-card {
  box-shadow:
    inset 0 0 10px #fff,
    inset 20px 0 50px #F078C2,
    inset -20px 0 60px #D73B46,
    inset 20px 0 100px #FF5B68,
    inset -20px 0 100px #FF5A71,
    0 0 50px #fff,
    -10px 0 50px #FF5B68,
    10px 0 50px #FF5B68;
}

#fight-row {
  margin-bottom: 30px;
}

.fight-list-header {
  text-align: center !important;
  vertical-align: middle !important;
  background: darkgray;
  color: white;
  font-size: medium;
  font-weight: bold;
}

.mat-cell {
  vertical-align: middle !important;
}

.powers {
  font-size: xx-large;
}

.hero {
  color: dodgerblue;
}

.villain {
  color: firebrick;
}

.collapse {
  padding: 10px;
}
